<script setup>
import { ref } from 'vue';
import {ElLoading, ElMessage} from 'element-plus';
import api from "@/api/index.js";

const isApplied = ref(false);
const isErr = ref(false);
const loading = ElLoading.service({
  lock: true,
  text: '加载中...'
});

const fetchApplicationState = () => {
  api.get('user/isAuthor').then(resp => {
    isApplied.value = resp.data;
    isErr.value = false;
    loading.close();
  }).catch(e => {
    ElMessage.error("加载失败"+e)
    isErr.value = true;
    loading.close();
  })
};
fetchApplicationState()

const applyForAuthor = () => {
  if (isApplied.value) {
    ElMessage({
      message: '您已经是创作者',
      type: 'warning',
    });
  } else {
    api.post('user/becomeAuthor').then(resp => {
      isApplied.value = resp.data;
      if(isApplied.value){
        ElMessage.success("申请成功")
      }else {
        ElMessage.error("申请失败")
      }
    }).catch(e => {
      ElMessage.error("网络错误!申请失败"+e)
    })

  }
};
</script>

<template>
  <div class="become-author-container">
    <el-row justify="center">
      <el-col :span="12">
        <el-card shadow="hover" class="custom-card">
          <template #header>
            <div class="card-header">
              <el-icon><Learning style="color: #409EFF;" /></el-icon>
              <span>申请成为创作者</span>
            </div>
          </template>
          <div class="card-content">
            <p>欢迎加入创作者行列！</p>
            <p>作为创作者，您可以分享您的知识和经验，与更多人交流。</p>
            <el-button
                type="primary"
                @click="applyForAuthor"
                :disabled="isApplied"
                class="custom-button"
                v-if="!isErr"
            >
              {{ isApplied ? '您已经是创作者' : '申请' }}
            </el-button>
            <h3 v-else style="color: red">出现错误,请重新访问</h3>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.become-author-container {
  height: 100vh;
  padding: 20vh 0;
}

.custom-card {
  background: linear-gradient(135deg, #ffffff, #f0f2f5);
  border-radius: 15px;
  height: 40vh;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
}

.card-header .el-icon {
  margin-right: 10px;
}

.card-content {
  text-align: center;
  padding: 20px 0;
}

.card-content p {
  margin: 15px 0;
  font-size: 16px;
  line-height: 1.6;
}

.custom-button {
  font-size: 18px;
  padding: 24px 48px;
  transition: all 0.3s ease;
}

.custom-button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
</style>